<template>
  <div class="systemAdmin">
    <content-header>管理员配置</content-header>
    <div class="container">
      <div class="body">
        <div class="action acea-row row-middle">
          <a-button type="primary" @click="showModal">
            <a-icon type="plus" />
            添加账号
          </a-button>
        </div>
        <div class="table">
          <a-table :columns="columns" :loading="adminLoading" :pagination="false" rowKey="id" :data-source="adminList" >
            <div slot="pic" slot-scope="record">
              <img :src="record.pic" v-if="record.pic != ''" alt="" class="pic">
              <a-avatar shape="square" v-else :size="64" icon="user" />
            </div>
            <div slot="lasttime" slot-scope="record">
              {{changeTime(record.lasttime)}}
            </div>
            <div slot="action" class="act acea-row row-middle" slot-scope="record">
              <a href="javascript:;" class="acea-row row-middle" @click="showModal(record.id)">编辑<p></p></a>
              <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="delAdmin(record.id)" >
                <a href="javascript:;" class="acea-row row-middle" >删除</a>
              </a-popconfirm>
            </div>
          </a-table>
        </div>
      </div>
    </div>
    <modal :title="formMod==='add'?'添加管理员资料':'修改管理员资料'" :show="show" @close="hideModal" width="500px">
      <a-form-model ref="formEdit" :model="formEdit" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="头像" prop="pic" >
          <a-upload name="tx" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="basePath+'/upload/tx'" @change="handleChange" >
            <img class="pic" v-if="formEdit.pic" :src="formEdit.pic" alt="avatar" />
            <div v-else>
              <a-icon :type="uploading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="账号" prop="username" required>
          <a-input v-if="formMod==='edit'" disabled v-model="formEdit.username" />
          <a-input v-else v-model="formEdit.username" />
        </a-form-model-item>
        <a-form-model-item label="昵称" prop="nickname">
          <a-input v-model="formEdit.nickname" />
        </a-form-model-item>
        <a-form-model-item label="权限规则" prop="rule_id" required>
          <a-select v-model="formEdit.rule_id" @change="(val)=>formEdit.rule_id=val">
            <a-select-option :value="item.id" v-for="(item,index) in rules" :key="index">
              {{item.title}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="密码" v-if="formMod==='add'" required prop="password">
          <a-input-password v-model="formEdit.password" />
        </a-form-model-item>
        <a-form-model-item label="新密码" v-else prop="password">
          <a-input-password v-model="formEdit.password" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitEdit">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </modal>
  </div>
</template>

<script>
import request from 'api/request'
import contentHeader from 'components/common/content-header'
import Modal from 'components/common/modal'
import config from 'public/config/config.js'

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '账号', dataIndex: 'username', key: 'username'},
  { title: '头像', key: 'pic', scopedSlots: { customRender: 'pic' } },
  { title: '昵称', dataIndex: 'nickname', key: 'nickname'},
  { title: '权限', dataIndex: 'rule_title', key: 'rule_title'},
  { title: '最后登入时间', key: 'lasttime',scopedSlots: { customRender: 'lasttime' }},
  { title: '操作', key: 'action',width:'200' ,scopedSlots: { customRender: 'action' },fixed:'right'},
]

export default {
  name:'systemAdmin',
  components:{
    contentHeader,
    Modal
  },
  data(){
    return{
      columns,
      labelCol: { span: 4 },
      wrapperCol: { span: 14,offset: 0.5 },
      show:false,
      basePath:config.basePath,
      uploading:false,
      adminLoading:false,
      defaultFormEdit:{
        id:'',
        username:'',
        password:'',
        nickname:'',
        rule_id:'',
        pic:''
      },
      formEdit:{},
      formMod:'add',
      adminList:[],
      // rules:[]
    }
  },
  created() {
    this.getAdminList()
  },
  methods: {
    getAdminList(){
      const that = this;
      this.adminLoading = true
      request.get("/admin/list").then(e=>{
        if(e.status == 200){
          that.adminList = e.data
          that.adminLoading = false
        }else{
          this.$message.error(e.msg)
        }
      })
    },
    // getRules(){
    //   const that = this
    //   request.get("/system/rules").then(e=>{
    //     this.getAdminList()
    //     if(e.status == 200){
    //       that.rules = e.data
    //     }else{
    //       that.$message.error(e.msg)
    //     }
    //   })
    // }, 
    submitEdit(){
      const that = this
      let formEdit = this.formEdit
      this.$refs.formEdit.validate(vaild=>{
        if(vaild){
          if(this.formMod === "add"){
            request.post("/admin/add",formEdit).then(e=>{
              if(e.status == 200){
                that.$message.success("添加成功")
                that.getAdminList()
                that.hideModal()
              }else{
                that.$message.error(e.msg)
              }
            })
          }else{
            request.post("/admin/edit",formEdit).then(e=>{
              if(e.status == 200){
                that.$message.success("修改成功")
                that.getAdminList()
                that.hideModal()
              }else{
                that.$message.error(e.msg)
              }
            })
          }
        }
      })
    },
    delAdmin(id){
      const that = this
      request.get("/admin/del",{id}).then(e=>{
        if(e.status == 200){
          that.$message.success("删除成功")
          that.getAdminList()
        }else{
          that.$message.error(e.msg)
        }
      })
    },
    showModal(id){
      if(typeof id === "number"){
        let list = this.adminList.find(e=>e.id == id)
        this.formEdit = JSON.parse(JSON.stringify(list)) 
        this.formEdit.id = id
        this.formEdit.password = ""
        this.formMod = "edit"
      }else{
        this.formEdit = JSON.parse(JSON.stringify(this.defaultFormEdit)) 
        this.formMod = "add"
      }
      this.show = true
    },
    handleChange:function(info){
      if (info.file.status === 'uploading') {
        this.uploading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        let res = info.file.response
        this.uploading = false;
        if(res.status == 200){
          this.formEdit.pic = res.data.path
        }
      }
    },
    hideModal(){
      this.show = false
      this.formEdit = {}
      this.$refs.formEdit.resetFields()
    },
    changeTime(time){
      if(time){
        let t = this.$moment(parseInt(time)).format('YYYY-MM-DD HH:mm:ss')
        return t
      }else{
        return '无'
      }
    }
  },
  computed:{
    rules(){
      return this.$store.state.admin.rules
    }
  }
}
</script>

<style scoped>
  .systemAdmin .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .systemAdmin .container .body{
    padding: 16px;
  }
  .systemAdmin .container .body .action{
    margin-bottom: 20px;
  }
  .systemAdmin .container .table .act p {
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .systemAdmin .container .table .pic{
    width: 64px;
    height: 64px;
    /* border-radius: 50%; */
  }
  .avatar-uploader {
    display: block;
  }
  .avatar-uploader .pic{
    width: 96px;
    height: 96px;
  }
</style>